<template>
    <rx-dialog order="button"
               btnalign="right"
               class="dialog"
               @handOk="handleSubmit"
               @cancel="cancel">
        <div style="margin-top: 10px"><span>{{i18n('title.applicationName','应用名称')}}:</span>
            {{i18n('form.vehicle','车辆管理')}}
        </div>
        <div class="publish-list">
            <div>
                <div class="publish-head">
                    <div v-if="publishPC" class="publish-yes">
                        {{i18n('form.published','已发布')}}
                    </div>
                    <span>
                         {{i18n('form.PCEnd','PC端')}}
                    </span>
                    <div class="publish-iconfont"><i class="iconfont iconchakandaping"></i>
                        {{i18n('form.portal','七窍应用门户')}}
                    </div>
                </div>
                <div class="publish-switch"><span>
                    {{i18n("form.publish","发布")}}
                </span><a-switch v-model="publishPC" default-checked @change="onChangePC" /></div>
            </div>
            <div>
                <div class="publish-head">
                    <div v-if="publishH5" class="publish-yes">
                        {{i18n('form.published','已发布')}}
                    </div>
                    <span>
                        {{i18n('title.terminal','移动端')}}
                    </span>
                    <div class="publish-iconfont"><i class="iconfont iconchakandaping"></i>
                        {{i18n('form.portal','七窍应用门户')}}
                    </div>
                </div>
                <div class="publish-switch"><span>
                    {{i18n('form.publish','发布')}}
                </span><a-switch v-model="publishH5" default-checked @change="onChangeH5" /></div>
            </div>
            <div>
                <div class="publish-head">
                    <div v-if="publishapplet" class="publish-yes">
                        {{i18n('form.published','已发布')}}
                    </div>
                    <span>
                        {{i18n('form.side','小程序端')}}
                    </span>
                    <div class="publish-iconfont"><i class="iconfont iconchakandaping"></i>
                        {{i18n('form.portal','七窍应用门户')}}
                    </div>
                </div>
                <div class="publish-switch"><span>
                     {{i18n('form.publish','发布')}}
                </span><a-switch v-model="publishapplet" default-checked @change="onChangeapplet" /></div>
            </div>
        </div>
        <div class="publish-tail">
            <span style="margin-right: 5px">
                 {{i18n('form.publishTo','发布到')}}
            </span>
            <span style="color: rgb(249,193,150);">
                {{i18n('title.wechatWorkbench','企业微信工作台')}}
            </span>
        </div>
    </rx-dialog>
</template>

<script>
import {RxDialog,Util} from "@lowcode/jpaas-common-lib";
export default {
    name: "ApplicationPublish",
     components:{RxDialog},
     props:{
        layerid: String,
        lydata: Object,
        destroy:Function
    },
    data(){
        return{
            publishPC:false,
            publishH5:false,
            publishapplet:false,
        }
    },
    methods:{
        i18n(name, text, key) {
            return this.$ti18(name, text, "applicationLang", key);
        },
        onChangePC(e){
          this.publishPC = e;
        },
        onChangeH5(e){
            this.publishH5 =e;
        },
        onChangeapplet(e){
            this.publishapplet = e;
        },
        handleSubmit(){
            Util.closeWindow(this,'ok');
        },
        cancel(){
            Util.closeWindow(this,'cancel');
        }
    }
}
</script>

<style scoped>
.publish-list{
    border: 1px solid #d9d9d9;
    width: 100%;
    height: 250px;
    margin-top: 20px;
    border-radius: 5px;
    display: flex;
    padding: 40px 0px;
}
.publish-list >div{
    flex: 1;
}
.publish-head{
    width: 170px;
    margin: auto;
    text-align: center;
    padding: 20px;
    background-color: rgb(251,249,244);
    border-radius: 5px;
    position: relative;
}
.publish-head >span{
    font-size: 17px;
    margin-bottom: 30px;
}
.publish-yes{
    position: absolute;
    top: 0px;
    right: 0px;
    width: 50px;
    line-height: 20px;
    background-color: white;
    color: #dad9d9;
}
.publish-iconfont >i{
    color: rgb(249,193,150);
    margin-right: 5px;
    font-size: 18px;

}
.publish-iconfont{
    font-size: 16px;
    margin-top: 10px;
}
.publish-switch{
    text-align: center;
    margin-top: 40px;
}
.publish-switch >span{
    margin-right: 5px;
    font-size: 16px;
}
.publish-tail{
    float: right;
    line-height: 40px;
    font-size: 15px;
    margin-top: 10px;
}
</style>